import React, {Component} from 'react'
import {Col, Form, Input, Select, Tooltip} from 'antd'
import Iconfont from '../../utils/iconfont'
import '../../static/scss/common/component.scss'
import commonConfig from "../../static/js/commonConfig";
import ImageComponent from "../fileViewer/component/imageComponent";
import VideoComponent from "../fileViewer/component/videoComponent";
import AudioComponent from "../fileViewer/component/audioComponent";

export class SelectComponent extends Component {
    render() {
        const {children, label, value, changeSelect, exportImage, style} = this.props;

        return (
            <>
                <div className="select_component">
                    {label ? <label>{label}：</label> : null}
                    <Select style={style || {}} size="small" onChange={(e) => changeSelect(e)} value={value}>
                        {children}
                    </Select>
                    {exportImage ?
                        <Tooltip title="导出图片">
                        <span className="export_picture" onClick={() => exportImage()}>
                            <Iconfont type="icon-daochutupian"/>
                        </span>
                        </Tooltip> : null}
                </div>
            </>
        )
    }
}

/*echarts 统计容器*/
export class ChartsComponent extends Component {
    render() {
        const {id, children, style} = this.props;
        return (
            <>
                <div className="statistics_charts" style={style || {}}>
                    {children}
                    <div id={id} className="charts_container"/>
                </div>
            </>
        )
    }
}


export const AccountComponent = (
    <Form.Item label="用户名" name="accunt" rules={[{required: true, message: '请填写用户名'}]}>
        <Input placeholder="用户名" autocomplate="off"/>
    </Form.Item>
)
export const MobileComponent = (
    <Form.Item label="联系电话" name="mobile"
               rules={[{required: true, pattern: /^1[3-9]\d{9}$/, message: '请填写正确的手机号'}]}>
        <Input placeholder="请填写单位申请提交的联系电话" autocomplate="off"/>
    </Form.Item>
)
export const RealNameComponent = (validate) => {
    let layout = {}
    if (validate) {
        layout = {
            rules: [{required: true, message: '请填写真实姓名'}]
        }
    }
    return (
        <Form.Item label="真实姓名" name="realName" {...layout}>
            <Input placeholder="请填写真实姓名" autocomplate="off"/>
        </Form.Item>
    )
}
export const idCard = (
    <Form.Item label="身份证号" name="idCard"
               rules={[{required: true, pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请填写正确的身份证号'}]}>
        <Input placeholder="请输入身份证号" autocomplate="off"/>
    </Form.Item>
)
export const UnitComponent = (unitList, callback, name, validate) => {
    let label = name || '单位名称'
    let layout = {}
    if (validate) {
        layout = {
            rules: [{required: true, message: '请选择' + label}]
        }
    }
    return (
        <Form.Item label={label} name="workunitId" {...layout}>
            <Select placeholder={'请选择' + label} onChange={(e) => {
                if (callback) callback(e)
            }}>
                {unitList.map((item, i) =>
                    <Select.Option key={i} value={item.id}>{item.name}</Select.Option>
                )}
            </Select>
        </Form.Item>
    )
}
export const RoleComponent = (roleList, callback, name, validate) => {
    let label = name || '角色'
    let layout = {}
    if (validate) {
        layout = {
            rules: [{required: true, message: '请选择' + label}]
        }
    }
    return (
        <Form.Item label={label} name="roleId" {...layout}>
            <Select placeholder={'请选择' + label} onChange={(e) => {
                if (callback) callback(e)
            }}>
                {roleList.map((item, i) =>
                    <Select.Option key={i} value={item.id}>{item.name}</Select.Option>
                )}
            </Select>
        </Form.Item>
    )
}
export const PasswordComponent = (edit) => {
    return (
        <Form.Item label="密码" name="password" rules={[{required: !edit, message: ''}, () => ({
            validator: (rule, value) => {
                if (/^[a-zA-Z]\w{3,17}$/.test(value)) {
                    return Promise.resolve();
                }
                return Promise.reject('格式：字母开头，a-zA-Z、0-9、_,长度4-18位')
            }
        })]}>
            <Input.Password placeholder="请输入密码" autocomplate="off"/>
        </Form.Item>
    )
}
export const PasswordSComponent = (edit) => {
    return (
        <Form.Item label="确认密码" name="passwordS" dependencies={['password']}
                   rules={[{required: !edit, message: ''}, ({getFieldValue}) => ({
                       validator: (rule, value) => {
                           if (value !== getFieldValue('password')) {
                               return Promise.reject('两次密码不一致');
                           }
                           return Promise.resolve();
                       }
                   })]}>
            <Input.Password placeholder="请再次确认密码" autocomplate="off"/>
        </Form.Item>
    )
}


export class ChildrenHeadComponent extends Component {

    backHandle = () => {
        const {path} = this.props;
        commonConfig.redirectPage(this, path);
    }

    render() {
        const {parentName, name} = this.props;
        return (
            <>
                <div className="clearFix children_head_component">
                    <div className="float-left breadcrumb_box animate__animated animate__fadeInLeft">
                        <span>{parentName}</span>
                        <span>>></span>
                        <span>{name}</span>
                    </div>
                    <div className="float-right back_box animate__animated animate__fadeInRight">
                        <span onClick={this.backHandle}><Iconfont type="icon-fanhui3"/>返回</span>
                    </div>
                </div>
            </>
        )
    }
}

export class DetailsItem extends Component {
    render() {
        const {item} = this.props;
        let imgList = item.imgList || [];
        let videoList = item.videoList || [];
        let audioList = item.audioList || [];
        return (
            <>
                {imgList.length > 0 ?
                    <Col span={24} className="basic_module_list">
                        <div className="custom_item_label">图片文件：</div>
                        <div className="custom_item_inline"
                             style={{width: 'calc(100% - 80px)'}}>
                            <ImageComponent imageList={imgList}/>
                        </div>
                    </Col>
                    : null}
                {videoList.length > 0 ?
                    <Col span={24} className="basic_module_list">
                        <div className="custom_item_label">视频文件：</div>
                        <div className="custom_item_inline"
                             style={{width: 'calc(100% - 80px)'}}>
                            <VideoComponent videoList={videoList}/>
                        </div>
                    </Col>
                    : null}
                {audioList.length > 0 ?
                    <Col span={24} className="basic_module_list">
                        <div className="custom_item_label">音频文件：</div>
                        <div className="custom_item_inline"
                             style={{width: 'calc(100% - 80px)'}}>
                            <AudioComponent audioList={audioList}/>
                        </div>
                    </Col>
                    : null}

            </>
        )
    }
}

